import React, {useEffect, useState} from 'react';
import {Button, Image, message, Modal, Skeleton, Switch} from "antd";
import ProForm, {ProFormSelect, ProFormText} from "@ant-design/pro-form";
import AliyunOssUpdate from "@/components/AliyunOssUpdate";
import {UploadOutlined} from "@ant-design/icons";
import {addClassifies, getClassifies, getClassifiesDetail, editClassifies} from "@/services/classifies";

const AddOrEdit = (props) => {
  const { id, showModal, Visible, refs } = props

  const [initialValues,setInitialValues] = useState(undefined)


  const [formObj] = ProForm.useForm();

  console.log(formObj);

  const setIconKey = (fileKey) => formObj.setFieldsValue({ 'img': fileKey });

  useEffect(async () => {
    if (id != undefined){
      const res = await getClassifiesDetail(id)
      console.log(res);
      setInitialValues(res)
      res.status = res.status == 1 ? true : false
      console.log(res);
    }
  },[])


  // 修改 获取dataTree
  const getDataTree = async () => {
    const res = await getClassifies()
    const data = res.map( item => {
      return {
        label: item.name,
        value: item.id,
      }
    })
    return data
  }

  const CreateOrEdit = async (data) => {
    console.log(data);
    if (data.id){//修改
      const response = await editClassifies(id, data);
      if (response.status === undefined) {
        message.success('修改分类成功');
        showModal(false);
        refs.current.reload();
      } else {
        message.success('修改分类失败');
      }
    }else{//添加
      console.log(data);
      const res = await addClassifies(data)
      console.log(res);
      if (res.status === undefined) {
        message.success('添加分类成功');
        showModal(false);
        refs.current.reload();
      } else {
        message.error('添加失败');
      }
    }

  }


  return (
    <div>
      <Modal
        title={id ? '编辑分类' : '添加分类'}
        visible={Visible}
        onCancel={() => showModal(false)}
        footer={false}
        destroyOnClose={true}
      >
        {
          initialValues == undefined && id != undefined ? <Skeleton active /> :
          <ProForm
            initialValues={initialValues}
            form={formObj}
            onFinish={(data) => CreateOrEdit(data)}>
            <ProFormSelect
              name="pid"
              label="父级路由"
              request={ () =>  getDataTree()}
              placeholder="请选择一个父级路由"
              rules={[{ required: true, message: '父级路由必选！' }]}
            />
            <ProFormText
              name="name"
              label="分类名称"
              placeholder="请输入分类名称"
              rules={[
                {
                  required: true,
                  message: '请输入分类名称!',
                },
              ]}
            />
            <ProFormText
              name="id"
              hidden={true}
            />
            <ProFormText
              name="url"
              label="分类跳转地址"
              placeholder="请输入分类跳转地址"
              rules={[
                {
                  required: true,
                  message: '请输入分类跳转地址!',
                },
              ]}
            />
            {id !== undefined ?
              <ProForm.Item
                name="img"
                label="广告图片"
                rules={[
                  {
                    required: true,
                    message: '请输入关于我们',
                  },
                ]}
              >
                <div>
                  <AliyunOssUpdate accept="image/*" setIconKey={setIconKey}>
                    <Button icon={<UploadOutlined />}>点击上传</Button>
                  </AliyunOssUpdate>
                  {initialValues.img != undefined ? <Image width={100} src={'https://my-pm.oss-cn-beijing.aliyuncs.com/' + initialValues.img} /> : ''}
                </div>
              </ProForm.Item> :
              <ProForm.Item
                name="img"
                label="分类图片"
                rules={[
                  {
                    required: true,
                    message: '请输入关于我们',
                  },
                ]}
              >
                <div>
                  <AliyunOssUpdate accept="image/*" setIconKey={setIconKey}>
                    <Button icon={<UploadOutlined />}>点击上传</Button>
                  </AliyunOssUpdate>
                </div>
              </ProForm.Item>
            }
            {
              id == undefined ? <ProForm.Item name="status">
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  name="status"
                  label="分类状态"
                  defaultChecked={true}
                />
              </ProForm.Item> :
                <ProForm.Item name="status">
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  name="status"
                  label="分类状态"
                  defaultChecked={initialValues.status}
                />
              </ProForm.Item>
            }
          </ProForm>
        }
      </Modal>
    </div>
  );
};

export default AddOrEdit;
